<!DOCTYPE html>
<html>

<head id="Head1">
    <title>图片编辑器</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/default.css" rel="stylesheet" type="text/css" />
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/colorpicker.css">
    <link rel="stylesheet" type="text/css" href="css/editor-min.css">
    <link rel="stylesheet" href="css/breakingnews.css">

    <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="js/colorpicker-min.js" type="text/javascript"></script>
    <script src="js/uniedit2.js" type="text/javascript"></script>
    <script src="js/html2canvas.min.js" type="text/javascript"></script>
    <script src="js/canvas2image.js" type="text/javascript"></script>
    <script src="ueditor/third-party/zeroclipboard/ZeroClipboard.min.js" type="text/javascript"></script>

    <style type="text/css">
        .the-icons td {
            border: #e2e2e2 dotted 1px;
            padding: 5px 9px;
            text-align: center;
            cursor: pointer;
            font-size: 16px;
        }

        .prew {
            width: 516px;
        }

        .hide {
            width: 0;
            height: 0;
            overflow: hidden;
        }

        .tr {
            display: table-row;
            vertical-align: inherit;
            border-color: inherit;
        }
    </style>
    <script src="js/breakingnews.js"></script>
</head>

<body>
    <div class="main" style="position:relative;">

        <div class="wxeditor">
            <div class="clearfix">
                <!--L S-->
                <div class="left clearfix">
                    <div class="tabbox clearfix">
                        <ul class="tabs" id="tabs">
                            <li>
                                <a href="javascript:void(0);" tab="tab1" class="current">消息快讯</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" tab="tab2" class="">游说社区</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" tab="tab3" class="">BGAA快讯</a>
                            </li>
                        </ul>
                        <em class="fr"></em>
                    </div>
                    <!--左侧菜单结束-->
                    <div class="tplcontent">
                        <div id="colorpickerbox"></div>
                        <!--左侧选择内容 S-->
                        <div>
                            <div id="tab1" class="tab_con">
                                <ul class="content clearfix">
                                    <li>
                                        <div class="itembox">
                                            <fieldset style="margin: 0.5em 0px; padding: 0px; border: 0px; max-width: 100%; color: rgb(68, 68, 68); font-family: 微软雅黑; line-height: 25px; white-space: normal; word-wrap: break-word !important; box-sizing: border-box !important; background-color: rgb(255, 255, 255);">
                                                <section style="overflow: hidden;">
                                                    <img src="./vipimg/lb/lbinfo1-1.jpg" style="width: 100%;float: left;"></section>
                                                <section style="padding:35px 20px;color: #6f6f6f;">
                                                    <section style="padding-left: 40px;line-height: 32px;position: relative;font-size: 18px;">
                                                        <img src="./vipimg/lb/lbinfo1-3.png" style="position: absolute;left: 0;">2018-01-03</section>
                                                    <section style="margin-top: 20px;font-size: 24px;line-height: 36px;">区块链医疗人工智能应用平台“LPLAI”或投资</section>
                                                    <section style="margin-top: 20px;font-size: 16px;line-height: 36px;min-height: 360px;">
                                                        <p>区块链医疗人工智能应用平台“LPLAI”或投资</p>
                                                    </section>
                                                </section>
                                                <section style="overflow: hidden;max-height: 145px;">
                                                    <img src="./vipimg/lb/lbinfo1-2.jpg" style="width: 100%;float: left;"></section>
                                            </fieldset>
                                        </div>
                                    </li>

                                    <li>
                                        <div class="itembox">
                                            <fieldset style="position: relative;margin: 0.5em 0px; padding: 0px; border: 0px; max-width: 100%; color: rgb(68, 68, 68); font-family: 微软雅黑; line-height: 25px; white-space: normal; word-wrap: break-word !important; box-sizing: border-box !important; background-color: #6d29bb;">
                                                <section style="overflow: hidden;min-height: 218px;border-radius: 8px 8px  0 0;background: url(./vipimg/qie/topbg.png) no-repeat;background-size:  contain;">
                                                    <section style="margin: 0 33px;background: #fff;border-radius: 10px;padding: 20px; margin-top: 134px;">
                                                        <section style="text-align: right;color:#6d29bb;font-size: 18px;">2018年08月01日 星期</section>
                                                        <section style="min-height: 360px; margin-top: 20px;">正文</section>
                                                        <section style="overflow: hidden;text-align: center;margin-top: 30px;">
                                                            <img src="./vipimg/qie/ewm.png" style="width: 50%;"></section>
                                                    </section>
                                                </section>
                                                <section style="overflow: hidden;">
                                                    <img src="./vipimg/qie/bottom.png" style="width: 100%;float: left;    margin-top: -156px;"></section>
                                            </fieldset>
                                        </div>
                                    </li>

                                </ul>
                            </div>

                            <div id="tab2" class="tab_con" style="display:none">
                                <ul class="content clearfix">
                                    <li>
                                        <div class="itembox">
                                            <fieldset style="position: relative;margin: 0.5em 0px; padding: 0px; border: 0px; max-width: 100%; color: rgb(68, 68, 68); font-family: 微软雅黑; line-height: 25px; white-space: normal; word-wrap: break-word !important; box-sizing: border-box !important; background-color: #414899;">
                                                <section style="border:6px solid #f8d83c;margin:80px 60px 0 60px;position: relative;">
                                                    <img style="position:absolute;top:-55px;left:50%;margin-left:-114px;"
                                                        src="./vipimg/qie/yslogo.png">
                                                    <img style="position:absolute;top:0;left:-50px;" src="./vipimg/qie/ysleft.png">
                                                    <img style="position:absolute;top:0;right:-50px;" src="./vipimg/qie/ysright.png">
                                                    <section style="margin:0 20px 20px 20px;background: #fff;color:#414899">
                                                        <p style="padding:10px;text-align: right">2018年11月01日 星期四</p>
                                                        <section style="word-break:break-all;word-wrap:break-word;margin:0 20px;min-height:300px;color: rgb(68, 68, 68); font-family: 微软雅黑; line-height: 25px; max-width:100%; white-space: normal; word-wrap: break-word !important; box-sizing: border-box !important; ">
                                                            <p>正文内容</p>
                                                        </section>
                                                        <section style="position:relative;width:100%;height:76px;text-align: center;margin-top:30px;">
                                                            <img style="position:absolute;left:50%;top:0;margin-left:-38px;width:76px;height:76px;"
                                                                src="./vipimg/qie/yscode.png">
                                                        </section>
                                                        <p style="text-align: center;padding-bottom:20px;">扫描二维码，了解更多资讯</p>
                                                    </section>
                                                </section>
                                                <section style="margin:20px auto 0 auto;overflow: hidden;max-height: 173px;">
                                                    <img style="width:100%;float:left" src="./vipimg/qie/ysbottom.png">
                                                </section>
                                            </fieldset>
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            <div id="tab3" class="tab_con" style="display:none">
                                <ul class="content clearfix">
                                    <li>
                                        <div class="itembox">
                                            <fieldset style="position: relative;margin: 0.5em 0px; padding: 0px 0 4em 0; border: 0px; max-width: 100%; color: rgb(68, 68, 68); font-family: 微软雅黑; line-height: 25px; white-space: normal; word-wrap: break-word !important; box-sizing: border-box !important; background-color: #fff;">
                                                <section style="margin:40px 1.4em 0 1.4em">
                                                    <img style="width:35%" src="./vipimg/qie/bgaalogo.png">
                                                </section>
                                                <section style="overflow:hidden"><img style="width:100%;float: left" src="./vipimg/qie/bgaabg1.png"></section>
                                                <section style="background: url(./vipimg/qie/bgaabg2.png) center repeat-y;background-size:contain">
                                                    <section style="padding:0 4em">
                                                        <p style="font-size:16px;padding:10px 0;text-align: right">2018年11月01日 星期四</p>
                                                        <section style="padding-bottom:30px;font-size:16px;word-break:break-all;word-wrap:break-word;min-height:300px;color: rgb(68, 68, 68); font-family: 微软雅黑; line-height: 25px; max-width:100%; white-space: normal; word-wrap: break-word !important; box-sizing: border-box !important; text-align: justify;">
                                                            <p>正文内容</p>
                                                        </section>
                                                    </section>
                                                </section>
                                                <section><img style="width:100%;" src="./vipimg/qie/bgaabg3.png"></section>
                                            </fieldset>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--左侧选择内容 E-->
                    <!--<div class="goto">→</div>-->
                </div>
                <!--L E-->
                <!--R S-->
                <div class="right">
                    <div id="bdeditor" style="margin-left:-57px;">
                        <script charset="utf-8" src="ueditor/ueditor.config.js" type="text/javascript"></script>
                        <script charset="utf-8" src="ueditor/ueditor.all.min.js" type="text/javascript"> </script>
                        <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
                        <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
                        <script charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js" type="text/javascript"></script>
                        <script id="editor" style="width: 108.7%; height: 796px;" type="text/plain"></script>
                    </div>
                </div>
                <!--R E-->
            </div>

            <div class="btn_container">
                <a href="javascript:;" id="meitu" class="btn btn-small qingkong breath" data-toggle="tooltip"
                    data-placement="right" title="">生成图片</a>
                <a href="javascript:;" id="clear-editor" class="btn btn-small qingkong breath" data-toggle="tooltip"
                    data-placement="right" title="" data-original-title="清空内容">清空内容</a>
            </div>
        </div>
        <div class="hide">
            <div class="prew"></div>
        </div>

        <script>
            $(function () {
                var saveFile = function (data, filename) {
                    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                    save_link.href = data;
                    save_link.download = filename;

                    var event = document.createEvent('MouseEvents');
                    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false,
                        false, 0, null);
                    save_link.dispatchEvent(event);
                }

                $('#meitu').click(function () {
                    const html = baidu.editor.getEditor('editor').getContent();
                    $('.prew').html(html);
                    html2canvas(document.querySelector(".prew")).then(canvas => {
                        var img = Canvas2Image.saveAsPNG(canvas, true).getAttribute('src');
                        saveFile(img, new Date().getTime() + '.png');
                    });
                });

                $('#clear-editor').click(function () {
                    if (confirm('友情提醒：是否确认清空内容，清空后内容将无法恢复！')) {
                        baidu.editor.getEditor('editor').setContent('');
                    }
                });

            });
        </script>

    </div>
    <script>
        /*小图标选择器*/
        function shifuMouseDownMark(id) {

            var con = $('#' + id).find("span").html();
            var range = UE.getEditor('editor').selection.getRange();

            range.select();

            UE.getEditor('editor').selection.getText();

            UE.getEditor('editor').execCommand('insertHtml', con);
        }
    </script>
    <script>
        $.browser = {};
        $.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase());
        $.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());
        $.browser.opera = /opera/.test(navigator.userAgent.toLowerCase());
        $.browser.msie = /msie/.test(navigator.userAgent.toLowerCase()) || /trident/.test(navigator.userAgent.toLowerCase());

        if ($.browser.msie) {
            alert("我们宅强烈建议下载360极速浏览器进行操作！");
        }
    </script>
    <!--foot E-->
    <!--底部浮动隐藏 <div id="bottomToolbar">热门推荐：我们宅</div>-->

</body>

</html>